<template>
  <div class="about">
 <p>name:{{ person.name }}</p>
  <p>age:{{ person.age }}</p>
  <hr />
  <p>name:{{ name }}</p>
  <p>age:{{ age }}</p>

  <button @click="changePerson">修改</button>
  </div>
</template>

<script lang="ts">
 import {defineComponent} from "vue"
export default defineComponent({
  name :"About",
 
});


</script>
<script lang="ts" setup>
import {reactive, toRefs}from 'vue';
const person = reactive({
  name:'limig',
  age: 82
})
let{name, age} = toRefs(person);
console.log(name,age);

const changePerson=()=>{
  person.age=12
  name.value = '黎明'
}
</script>